<template>
	<view class="container">
		<hx-navbar :back="false" :backgroundColor="[255, 255, 255]" :fixed="true">
			<view slot="left" class="flex justify-center align-center container-top" style="width:100%;margin: 0 45rpx;">
				<view class="cuIcon-back" style="font-size: 36rpx;position: absolute;left: 30rpx;" @tap="back">
				</view>
				<view class="" style="font-size: 36rpx;">
					红槛木桩景
				</view>
				<view class="flex align-center" style="position: absolute;right: 30rpx;">
					<i class="fa fa-star" :class="collection?'yellow':''" @tap="shoucang" style="font-size: 40rpx;margin: 0 30rpx 0 10rpx;" aria-hidden="true"></i>
					<i class="fa fa-share-alt" style="font-size: 40rpx;" aria-hidden="true"></i>
				</view>
			</view>
		</hx-navbar>
		<view class="ytx"></view>
		<view class="qougou-text">
			<view class="flex justify-between">
				<view class="name">
					红槛木桩景 
				</view>
				<view class="bar">
					举报
				</view>
			</view>
			<view class="gssj">
				至2020-10-16结束
			</view>
			<view class="parameter">
				<view class="flex">
					<view class="left">
						求购数量： 
					</view>
					<view class="right">
						3
					</view>
				</view>
				<view class="flex">
					<view class="left">
						用苗地区： 
					</view>
					<view class="right">
						福建省龙岩市
					</view>
				</view>
				<view class="flex">
					<view class="left">
						产品规格： 
					</view>
					<view class="right">
						杆径:30~30cm 
					</view>
				</view>
				<view class="flex">
					<view class="left">
						产品描述： 
					</view>
					<view class="right">
						另需求购大量各品种苗木，求购数量不便一一发布，有意者本人微信
					</view>
				</view>
			</view>
		</view>
		<view class="ytx"></view>
		<view class="qougou-img">
			<image src="../../static/imgs/buyvip.png" mode="widthFix"></image>
		</view>
		<view class="bottom">
			<view class="flex justify-between">
				<view class="">
					仅会员可使用联系功能，请开通会员
				</view>
				<view class="">
					去开通会员<text class="cuIcon-right"></text>
				</view>
			</view>
			<view class="button flex">
				<view class="bg-yellow">
					<i class="fa fa-phone" aria-hidden="true"></i>电话联系
				</view>
				<view class="bg-red">
					<i class="fa fa-bookmark" aria-hidden="true"></i>立即报价
				</view>
				<view class="bg-green">
					<i class="fa fa-commenting" aria-hidden="true"></i>在线沟通
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import 'static/css/font-awesome.min.css';
export default {
    data() {
        return {
            collection:false
        };
    },
    methods: {
        back() {
            uni.navigateBack({});
        },
        shoucang(){
            this.collection=!this.collection;
        }
    }
};
</script>

<style>
	.yellow {
		color: #FFDC69;
	}
	.ytx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F5;
	}
	.qougou-text{
		padding: 30rpx;
	}
	.qougou-text .name{
		font-weight: bold;
		font-size: 36rpx;
	}
	.qougou-text .bar{
		width: 72rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
		border-radius: 15rpx;
		border: 2rpx #F34F4F solid;
		color: #F23839;
		font-size: 24rpx;
	}
	.qougou-text .gssj{
		font-size: 24rpx;
		color: #999999;
		margin: 15rpx 0;
	}
	.parameter{
		font-size: 28rpx;
	}
	.parameter .flex{
		line-height: 60rpx;
	}
	.parameter .left{
		width: 25%;
		color: #999999;
	}
	.parameter .right{
		width: 66%;
	}
	.qougou-img{
		margin: 35rpx 25rpx;
	}
	.qougou-img image{
		width: 700rpx;
		height: 284rpx;
		border-radius: 20rpx;
	}
	
	
	.bottom{
		width: 694rpx;
		position: fixed;
		bottom: 20rpx;
		left: 0;
		right: 0;
		margin: auto;
		background-color: #FFF7DC;
		border-radius: 30rpx 30rpx 50rpx 50rpx;
	}
	.bottom .justify-between{
		font-size: 20rpx;
		color: #E67122;
		padding: 15rpx 50rpx;
		transform: scale(.9);
	}
	.bottom .button view{
		width: 33.3%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.bottom .button{
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 30rpx;
	}
	.bottom .button i{
		font-size: 44rpx;
		margin-right: 10rpx;
	}
	.bg-yellow{
		background-color: #F3AD5A;
		color: #FFFFFF;
		border-radius: 50rpx 0rpx 0rpx 50rpx;
	}
	.bg-red{
		background-color: #F3635A;
	}
	.bg-green{
		background-color:#26C594;
		border-radius: 0rpx 50rpx 50rpx 0rpx;
	}
</style>
